<template>
    <div class="css-homepage">
        <el-container>
            <el-header>Header</el-header>
            <el-main>
                <div class="fun-module">
                    <div :ref="`CardRef${index + 1}`" v-for="(item, index) in funList" :key="index" class="card"
                        @mousemove="_Mouse_Move($event, `CardRef${index + 1}`)">
                        <div class="content" @click="_Go_Fun(item)">
                            {{ item }}
                        </div>
                    </div>
                </div>
                <div>
                    <el-button @click="_Theme_Change()">切换主题</el-button>
                    <el-button @click="_Quit()">退出</el-button>
                </div>
            </el-main>
            <el-footer>Footer</el-footer>
        </el-container>
    </div>

</template>
<script setup>
import { ref, getCurrentInstance, onMounted, onUnmounted } from 'vue'
const { proxy } = getCurrentInstance()
import { thisPinia } from '@/pinia/index';
const pinia = thisPinia();
// import { storeToRefs } from 'pinia';
// const { token } = storeToRefs(pinia);
const _Quit = () => {
    // token.value = ''
    pinia._token('')
    proxy.$router.replace('/login')
}
const funList = ref(['查询', '记录', '功能', '功能', '功能', '功能', '功能'])
let animationFrameId = null

const _Mouse_Move = (e, thisRef) => {
    if (!proxy.$refs[thisRef][0]) return

    // 取消之前的动画帧以避免重叠
    if (animationFrameId) {
        cancelAnimationFrame(animationFrameId)
    }

    animationFrameId = requestAnimationFrame(() => {
        const rect = proxy.$refs[thisRef][0].getBoundingClientRect()
        const centerX = rect.left + rect.width / 2
        const centerY = rect.top + rect.height / 2
        const maxTilt = 10 // 倾斜角度

        // 计算鼠标相对于卡片中心的位置
        const offsetX = (e.clientX - centerX) / (rect.width / 2)
        const offsetY = (e.clientY - centerY) / (rect.height / 2)
        // 交换offsetY和offsetX实现自然倾斜方向
        const tiltY = offsetX * -maxTilt
        const tiltX = offsetY * maxTilt

        proxy.$refs[thisRef][0].style.transform = `
            perspective(1000px)
            rotateX(${tiltX}deg)
            rotateY(${tiltY}deg)`
        proxy.$refs[thisRef][0].style.backgroundPosition = '20% 90%'
    })
}

const _Go_Fun = (distinguish) => {
    switch (distinguish) {
        case '查询':
            proxy.$router.push('/study/search')
            break
        case '记录':
            proxy.$router.push('/study/record')
            break
        default:
            break
    }
}

const _Theme_Change = () => {
    proxy.$Theme('*')
}

onMounted(() => {
})

onUnmounted(() => {
    if (animationFrameId) cancelAnimationFrame(animationFrameId)
})

</script>
<style scoped lang="scss">
.css-homepage {
    .el-header {
        height: 60px;
        background-color: var(--theme-color2);
    }

    .el-main {
        width: 100%;
        height: calc(100vh - 120px);
        overflow-y: auto;

        &::-webkit-scrollbar {
            display: none;
        }
    }

    .fun-module {
        display: flex;
        width: 100%;
        padding-bottom: 20px;
        overflow-x: auto;

        &::-webkit-scrollbar {
            display: none;
        }
    }

    .el-footer {
        height: 60px;
        background-color: var(--theme-color2);
    }
}

.card {
    flex: 0 0 auto;
    width: 220px;
    height: 300px;
    margin: 30px;
    padding: 20px;
    background: linear-gradient(30deg, var(--theme-color2) 50%, #FFF 50%);
    border-radius: 10px;
    transition: transform 0.1s ease-out;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    cursor: pointer;

    &:hover {

        .content::before,
        .content::after {
            width: calc(100% - 32px);
            height: calc(100% - 32px);
        }
    }
}



.content {
    background-color: var(--theme-color1);
    width: 100%;
    height: 100%;
    transform: translateZ(30px);
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    font-family: 'KAITI';

    &::before {
        content: "";
        width: 20px;
        height: 20px;
        border: 2px solid var(--theme-color2);
        position: absolute;
        z-index: 2;
        transition: .3s;
        top: 15px;
        right: 15px;
        border-bottom-width: 0;
        border-left-width: 0;
    }

    &::after {
        content: "";
        width: 20px;
        height: 20px;
        border: 2px solid var(--theme-color2);
        position: absolute;
        z-index: 2;
        transition: .3s;
        bottom: 15px;
        left: 15px;
        border-top-width: 0;
        border-right-width: 0;
    }
}
</style>